<template>
  <div class="p-6px">
    <el-card class="rounded-md" shadow="never" style="min-height: 830px">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in tabs" :key="index">
          <div v-if="activeName === item.name">
            <component @handle-submit="handleClick" :is="item.component" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="coleWechatConfigPage">
import { markRaw, ref } from "vue";
import subscribe from "./components/subscribe.vue";
import text from "./components/text.vue";

let tabs = ref<any>([
  {
    name: "关注回复",
    component: markRaw(subscribe)
  },
  {
    name: "关键词回复",
    component: markRaw(text)
  }
]);

const activeName = ref(tabs.value[0].name);
const handleClick = () => {

};

</script>

<style lang="scss" scoped></style>
